<template>
  <div class="notes-box" >
    <!-- 顶部导航 -->
    <van-nav-bar title="手记精选" 
       
       @click-right="goTo"
       >

           <!-- 使用插槽可自定图标样式 -->
            <template #right>
              
                <van-icon name="chat-o" size="18" color="black" />
            </template>
        </van-nav-bar>

        

    <div class="fixed">
      <div class="refresh" @click="fresh()"><img src="../assets/fresh.png" alt=""></div>
      <div class="upload" @click="load()"><img src="../assets/photo.png" alt=""></div>
    </div>


    <!-- 主题内容 -->
    <div class="notes-main" 
    
    v-infinite-scroll="loadMore" 
    :infinite-scroll-disabled="busy"
    :infinite-scroll-distance="20"
    :infinite-scroll-immediate="false"
    :infinite-scroll-throttle-delay ="300" 
    
    >
   
      
      <waterfall :col='2'  :data="Noteslist"  >
        
  <template>
    <!-- <div class="content-box" v-for='(item,index) in Noteslist' :key="index"  >
      <img v-if="item" :src="item.images[0]" alt=""  @click="goDetails(item.id)">
      <div class="title">{{item.title}}</div>
      <div class="msg-box" @click="good" id="0" >
        
        <div class="user"><div class="touxiang"><img :src="item.user.avatar" alt=""></div><div class="auter">{{item.user.username}}</div></div>
        <div class="good" ><span>{{item.count.count_liked}}</span><van-icon :name="zan"></van-icon></div>
      </div>
    </div> -->

    <goods v-for='(item,index) in Noteslist' :key="index" :data='item'></goods>
    

  </template>
  
</waterfall>

    

    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import goods from '../components/goods.vue'



  export default {
    name:'Shouji',
    data(){
      return{
        Noteslist:[],
        busy:false,
       
        page:1,
        container: null,
        id:'',
        loading: false,
        finished: false,
       
        


      }
    },

    components:{
        
        Toast,
        goods,
    },

    created(){


     
    },

    mounted(){
      
    },


    methods:{

      goTo(){
                this.$router.push({name: 'Home', params: {}}); 
            },


     loadMore(){

            
              this.axios({

              
                // 请求类型
                method:'get',
                // 请求路径 详情内容
                 url:'https://apis.netstart.cn/xpc/notes?page='+this.page,

            }).then(result =>{
              
                this.Noteslist.push(...result.data.data.list);
               
                this.id = result.data.data.list.id

             
                
            }).catch(err =>{
                 
            }),

            this.page += 1

           
        
            },

        fresh(){
          this.$router.go(0)
        },

        load(){
          Toast('手记暂时只对认证用户开放\n可前往【我的】页面进行认证')
          
        },

            goDetails(id){
              
               this.$router.push({name: 'Notesdetails', query: {id}});
               
      },

        good(e){
         
            if(e.path[1] == '0'){
              this.zan = 'good-job'
              e.target.id = '1'
            }else {
              this.zan = 'good-job-o'
              e.target.id = '0'
            }
        }


    },

    

    
    
  }
</script>

<style lang="less">


  .notes-box{



    .van-nav-bar__content{
       
        border-bottom: 1px solid rgb(255, 255, 255);
    }
  

  


  .notes-main{
    background-color: rgb(255, 255, 255);
    width: 100%;
    height:calc(100vh - 50px);
    overflow: auto;
    position: relative;
  }

  .fixed{
    width: 50px;
    height: 120px;
    // background-color: rgb(241, 75, 75);
    position: fixed;
    bottom: 80px;
    right: 8px;
    z-index: 1;
  
    .refresh{
      width: 50px;
      height: 50px;
      background-color: rgb(255, 255, 255);

      border-radius: 50%;
    }

    .upload{
      margin-top: 10px;
      width: 50px;
      height: 50px;
      background-color: rgb(245, 16, 16);
      border-radius: 50%;
    }

    img{
     position: relative;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);

    }

  }


  // .content-box{
   
  //   margin: 2px;
  //   border: 1px solid rgb(255, 255, 255);
  //   border-radius: 5px;

  //   .title{
  //       font-size: 14px;
  //       margin: 10px;
  //     }


  //   .msg-box{
  //     display: flex;
  //     align-items: center;
  //     justify-content: space-between;
  //      margin: 10px;

  //     img{
  //       border-radius: 50%;
  //     }

    
  //     .user{
  //     display: flex;
      
  //     align-items: center;

  //     .touxiang{
  //       width: 25px;
  //       height: 25px;
  //       border-radius: 50%;
  //     }

  //     .auter{
  //       margin-left: 5px;
  //     }


  //   }

  //     .good{
  //       font-size: 14px;
  //     }

      

      

  //   }




  //   img{
  //     border-radius: 5px 5px 0px 0px;
  //   max-width: 100%;
  //   max-height: 100%;
  // }
  // }

  .loading{
        width: 100%;
        text-align: center;
        height: 10px;
      }
  
}

</style>